import React, { FC, useRef } from 'react'
import { Avatar, Image,Tooltip } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import {inject,observer} from 'mobx-react'
import {ajax} from './../api/index'
import { baseURL } from '../api/request';
const Avatar1:FC<any>=({
  uinfo
})=> {
  const {userInfo,changeInfo}=uinfo
  const file:any=useRef()
  const todoUpload=async()=>{
      var filedata=file.current.files[0]
      console.log(filedata);
      var data=new FormData()
      data.append("file",filedata)
      let res =await ajax.uploadfile(data)
      let {path}=res
    
    //上传成功，修改用户信息

    if(res.code==200){
      console.log(path);
      let  res1=await ajax.changeuserinfo({
        avatar:path
      })
      if(res1.code==200){
        //修改用户信息后，改变mobx里的数据
        userInfo.avatar=path;
        changeInfo(userInfo)
      }
      
      
    }
    
    
  }
  const startUpload=()=>{
    file.current.click()
    console.log(file.current);
  }
  return (
    <div style={{cursor:'pointer'}}>
            <input type="file" style={{display:'none' }}  ref={file}  onChange={todoUpload} />
            <Tooltip placement="bottom" title={'上传头像'}>
                {
                     userInfo?.avatar?
                     <img src={userInfo.avatar.replace(/public/,baseURL)} style={{width:40,height:40,borderRadius:'50%',position:"absolute",left:0,right:0,bottom:0,top:0,margin:"auto"}}  onClick={startUpload}  />
                     :
                     <img onClick={startUpload}  style={{width:40,height:40,borderRadius:'50%',position:"absolute",left:0,right:0,bottom:0,top:0,margin:"auto"}}   src={require('../assets/images/xiaoxin_2.jpg')} />
                }
            </Tooltip>
        </div>
  )
}
export default inject('uinfo')(observer(Avatar1))
